import React,{ Component } from 'react'
import { connect } from 'react-redux'

const TodoList = (props)=> {
    // render(){
        const { list,changeInputValue,inputValue,handleClick,deleteItem } = props
        return <div>
            <div>
                <input type="text"
                       value={inputValue}
                       onChange={changeInputValue }
                />
                <button onClick={handleClick}> 提交 </button>
            </div>
            <ul>
                {list.map((item,index)=>{
                  return <li key={index} onClick={()=>{deleteItem(index)}}>{item}</li>
                })}
            </ul>
        </div>
    // }
}
const mapStateToProps = (state)=> {
    return {
        inputValue:state.inputValue,
        list: state.list
    }
}
const mapDispatchToProps = (dispatch) =>{
    return {
        changeInputValue(e){
            const action = {
                type: 'change_input_value',
                value: e.target.value
            }
            dispatch(action)
        },
        handleClick(){
            const action = {
                type: 'add_item_to_list',
            }
            dispatch(action)
        },
        deleteItem(index){
            const action = {
                type: 'delete_item',
                value: index
            }
            dispatch(action)
        }

    }
}
export default connect(mapStateToProps,mapDispatchToProps)(TodoList)
